<style>
    /** 通用 **/
    .div-page{height: 480px; overflow: auto}
    #fixed{position: absolute;top:16px;left: 45%;}

    .panel-heading,
    .panel-heading label,
    .panel-heading span,
    .panel-body{ font-family: Microsoft YaHei,'宋体' , Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; font-size: 14px;}


    #panel-root-menu *{cursor: pointer;}

    .dropzone.active {outline: 1px solid #ffff00;}
    .dropzone.hover {outline: 1px solid green;}

    /** 左侧 **/
    .remove {width:25px;height: 20px;text-align:center;background:none;margin:10px 10px 0 0;padding: 0;}
    #panel-root-menu .drop-item{padding: 0 0 0 0;}
    #panel-root-menu > .dropzone{padding: 0 0 0 0;}

    #panel-root-menu .dropzone .panel-collapse{padding: 0 0 0 1em;}

    #panel-root-menu > .dropzone > .panel-collapse .dropzone .panel-heading{padding: 0 0 0 0em;}
    #panel-root-menu > .dropzone > .panel-collapse .drop-item .Custom-heading{padding: 0 0 0 0em;}
    .CustomHead{height: 40px;line-height: 40px;padding: 0 0 0 1em;}
    .CustomBody{height: 40px;line-height: 40px;padding: 0 0 0 1em;}
    #panel-root-menu .dropzone > .panel-collapse .CustomCollapse{padding: 0 0 0 1em;}
    /*
    .panel-heading{height: 40px;line-height: 40px;padding: 0 0 0 1em;vertical-align: middle;cursor: pointer;}
    #panel-root-menu .panel .panel-default{margin: 1em;}

    #panel-root-menu .panel-body {padding: 0 0 1em 1em;}
        .drop-item .panel-heading label{overflow:hidden;text-indent: 0em;}
        .drop-item.panel-body label{overflow:hidden;text-indent: 0em;font-weight: normal;}*/

    /** 右侧 **/

    #fixed .panel-body .drag  {height:30px;line-height:30px;vertical-align: middle;}
    #fixed .panel-body .drag a {color: #fff;}
    .badge {
        color: #fff;
        font-weight: normal;
        font-size: 13px;
        background-color: #5b86a4;
    }
    a.badge:hover{
        color: #fff;
        background-color: #2da8d3;
    }
    /*
    .div-page1{height: 464px; overflow: auto}
    #fixed1{position: fixed;top:21%;left: 55%;}
*/
</style>
<div class="row-fluid clearfix">
    <div class="col-sm-12 column">
        <ul class="breadcrumb">
            <li>
                <a href="index.html">首页</a>
            </li>
            <li class="active">
                用户菜单分配
            </li>
        </ul>
    </div>
    <div class="col-sm-12 column">
        <div class="col-sm-12 div-page">
            <div class="col-sm-5 " style="height:450px;overflow: auto ">
                <div class="panel-group " id="panel-root-menu">
                    <div class="col-sm-12 panel panel-default dropzone">
                        <div class="col-sm-12 panel-heading collapsed  " data-toggle="collapse"
                             data-parent="#panel-root-menu" href="#panel-element-00" aria-expanded="true">
                            <label class="panel-title collapsed ">主菜单</label>
                        </div>
                        <div id="panel-element-00" class="col-sm-12 panel-collapse collapse in" aria-expanded="true">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 " id="fixed">
                <div class="panel panel-default">
                    <div class="panel-heading"><label class="panel-title">目录</label></div>
                    <div class="panel-body" id="father" style="height: 140px;overflow: auto"></div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading"><label class="panel-title">交易</label></div>
                    <div class="panel-body" id="child" style="height: 140px;overflow: auto"></div>
                </div>
                <button class="btn btn-primary btn-savemenu">Save</button>
            </div>
        </div>
    </div>
</div>
<script>
$(function(){
    /*生成 1.原子交易 2.非原子交易 3.用户现有菜单-Start*/
    $.ajax({
        type: "get",
        url: globalUrl+'api/MenuScript?page=1&rows=99',
        dataType: "json",
        success: function (resp) {
            if(resp)
            {
                var node=resp.data.rows;
                var len1=node.length;
                for(i=0;i<len1;i++)
                {
                    if(node[i].Child=="1")
                    {
                        $("#father").append('<div class="drag col-sm-3 father" data='+node[i].TransCode+'><a class="badge" href="#">'+node[i].TransName+'</a></div>');
                    }
                    else
                    {
                        $("#child").append('<div class="drag col-sm-3 child" data='+node[i].TransCode+'><a class="badge" href="#">'+node[i].TransName+'</a></div>');
                    }
                }
                $('.drag').draggable({
                    appendTo: 'body',
                    helper: 'clone'
                });
                $.ajax({
                    type: "get",
                    url:globalUrl+'api/MenuUserType?UserType='+localStorage.Dic_data,
                    dataType: "json",
                    success: function (respMenu) {
                        if(respMenu)
                        {
                            initUserMenu(respMenu)
                        }
                        else
                        {
                            alert("获取菜单数据为空！");
                        }
                        init();
                        $(".remove").on("click",function () {
                            //var obj = $(this).parent().hasClass("drop-item") ?  $(this).parent(): $(this).parent().parent();
                            var obj = $(this).parent().parent().parent();
                            obj.detach();
                        });
                    },
                    error:function(){
                        alert("获取用户菜单数据失败！");
                    }
                });
            }
            else
            {
                alert("获取菜单数据为空！");
            }


        },
        error:function(){
            alert("获取用户菜单数据失败！");
        }
    });
    /*生成 1.原子交易 2.非原子交易 3.用户现有菜单-End*/


    $('.drag').draggable({
        appendTo: 'body',
        helper: 'clone'
    });
    init();


    /*保存菜单按钮事件-Start*/
    $(".btn-savemenu").click(function(){
        var menu={transCode:"",child:[]};
        var leval1=$("#panel-element-00").children();
        len1=$("#panel-element-00").children().length;
        for(var i=0;i<len1;i++)
        {
            var node={
                transCode:leval1.eq(i).attr("data"),
                child:[]
            };
            menu.child.push(node);
            if(leval1.eq(i).attr("data").substr(0,1)==1)
            {
                continue;
            }
            leval2=leval1.eq(i).children().eq(1).children();
            len2=leval2.length;
            for(var j=0;j<len2;j++)
            {
                var node={
                    transCode:leval2.eq(j).attr("data"),
                    child:[]
                };
                menu.child[i].child.push(node);
                if(leval2.eq(j).attr("data").substr(0,1)==1)
                {
                    continue;
                }
                leval3=leval2.eq(j).children().eq(1).children();
                len3=leval3.length;
                for(var k=0;k<len3;k++)
                {
                    var node={
                        transCode:leval3.eq(k).attr("data"),
                        child:[]
                    };
                    menu.child[i].child[j].child.push(node);
                }
            }
        }
        console.log(menu);
        console.log(JSON.stringify(menu).length);
        $.ajax({
            type: "post",
            url: globalUrl+'api/MenuUserType?UserType='+localStorage.Dic_data,
            data:{
                TransCode:JSON.stringify(menu)
            },
            dataType: "json",
            success: function (resp) {
                if(resp.result)
                {
                    alert("菜单保存成功")
                }
                else
                {
                    alert("菜单保存失败！");
                }


            },
            error:function(){
                alert("菜单保存异常");
            }
        });
    });
    /*保存菜单按钮事件-End*/

});

/*用户菜单初始化-Start*/
function initUserMenu(resp)
{
    console.log(resp);
    var menu1=resp.data[0].children;
    var len1=menu1.length;
    for(i=0;i<len1;i++)
    {
        if(menu1[i].TransCode.substr(0,1)=='1')
        {
            $("#panel-element-00").append('<div class="col-sm-12 drop-item panel-body" data="'+menu1[i].TransCode+'">' +
                    '<div class="col-sm-12 Custom-heading">' +
                    '<div class="col-sm-12 CustomBody">' +
                    '<label>'+menu1[i].TransCodeNameShow+'</label>' +
                    '<button type="button" class="btn btn-xs pull-right remove"><span class="icon-em del"></span></button>' +
                    '</div></div></div>');
            continue;
        }
        console.log(menu1[i].TransCodeNameShow);
        var menu2=menu1[i].children;
        var len2=menu2.length;
        var htmlStr1='<div class="col-sm-12 panel panel-default dropzone drop-item ui-droppable ui-sortable" data="'+menu1[i].TransCode+'">'+
                '<div class="col-sm-12 panel-heading collapsed" data-toggle="collapse" data-parent="#panel-element-00" href="#panel-element-'+i+'" aria-expanded="false">' +
                '<div class="col-sm-12 CustomHead">' +
                '<label class="panel-title collapsed">'+menu1[i].TransCodeNameShow+'</label>'+
                '<button type="button" class="btn btn-xs pull-right remove"><span class="icon-em del"></span></button>' +
                '</div></div>'+
                '<div class="col-sm-12 panel-collapse collapse CustomCollapse" id="panel-element-'+i+'" aria-expanded="false">';
        for(j=0;j<len2;j++)
        {
            if(menu2[j].TransCode.substr(0,1)=='1')
            {
                htmlStr1=htmlStr1+ '<div class="col-sm-12 drop-item panel-body" data="'+menu2[j].TransCode+'">' +
                        '<div class="col-sm-12 Custom-heading">' +
                        '<div class="col-sm-12 CustomBody">' +
                        '<label>'+menu2[j].TransCodeNameShow+'</label>' +
                        '<button type="button" class="btn btn-xs pull-right remove"><span class="icon-em del"></span></button>' +
                        '</div></div></div>';
                continue;
            }
            var menu3=menu2[j].children;
            var len3=menu3.length;
            htmlStr1=htmlStr1+'<div class="col-sm-12 panel panel-default dropzone drop-item ui-droppable ui-sortable" data="'+menu2[j].TransCode+'">'+
                    '<div class="col-sm-12 panel-heading collapsed" data-toggle="collapse" data-parent="#panel-element-'+i+'"'+' href="#panel-element-'+'a'+j+'" aria-expanded="false">' +
                    '<div class="col-sm-12 CustomHead">' +
                    '<label class="panel-title collapsed">'+menu2[j].TransCodeNameShow+'</label>'+
                    '<button type="button" class="btn btn-xs pull-right remove"><span class="icon-em del"></span></button>' +
                    '</div></div>'+
                    '<div class="col-sm-12 panel-collapse collapse CustomCollapse" id="panel-element-'+'a'+j+'" aria-expanded="false">';
            for(k=0;k<len3;k++)
            {
                console.log("        "+menu3[k].TransCodeNameShow);
                htmlStr1=htmlStr1+'<div class="col-sm-12 drop-item panel-body" data="'+menu3[k].TransCode+'">' +
                        '<div class="col-sm-12 Custom-heading">' +
                        '<div class="col-sm-12 CustomBody">' +
                        '<label>'+menu3[k].TransCodeNameShow+'</label>' +
                        '<button type="button" class="btn btn-xs pull-right remove"><span class="icon-em del"></span></button>' +
                        '</div></div></div>';
            }
            htmlStr1=htmlStr1+ '</div></div>';
        }
        htmlStr1 = htmlStr1 + '</div></div>';
        $("#panel-element-00").append(htmlStr1);

    }
}
/*用户菜单初始化-End*/


/*拖动操作初始化及规范-Start*/
function init(){
    $('.dropzone').droppable({
        activeClass: 'active',
        hoverClass: 'hover',
        accept: ":not(.ui-sortable-helper)", // Reject clones generated by sortable 排序时不复制
        greedy : true,
        drop: function (e, ui) {
            var name = $(this).find(' > div').attr("href");
            var obj = $(name);

            if(!!obj.parent().attr("data"))
            {
                /*if(obj.parent().attr("data").substr(0,1)!="1"&&$(ui.draggable).hasClass("father"))
                 {
                 alert("目前只支持二级菜单！");
                 return;
                 }*/
                if(obj.parent().parent().parent().parent().attr("id")=="panel-element-00"&&$(ui.draggable).hasClass("father"))
                {
                    alert("目前只支持三级菜单！");
                    return;
                }
            }

            for(var i=0;i<obj.children().length;i++)
            {
                if(obj.children().eq(i).attr("data")==$(ui.draggable).attr("data"))
                {
                    alert("节点重复！");
                    return;
                }
            }

            if($(ui.draggable).hasClass("father")){
                var $el = $('<div class="col-sm-12 panel panel-default dropzone drop-item" data="'+$(ui.draggable).attr("data")+'">' +
                        '<div class="col-sm-12 panel-heading" data-toggle="collapse" data-parent="'+name+'" href="#panel-element-'+Date.parse(new Date())+'">' +
                        '<div class="col-sm-12 CustomHead">' +
                        '<label class="panel-title collapsed">' + ui.draggable.text() + '</label>' +
                        '<button type="button" class="btn btn-xs pull-right remove"><span class="icon-em del"></span></button>' +
                        '</div>' +
                        '</div>' +
                        '<div class="col-sm-12 panel-collapse collapse" id="panel-element-'+Date.parse(new Date())+'"></div>' +
                        '</div>');
            }else{
                var $el = $('<div class="col-sm-12 drop-item panel-body" data="'+$(ui.draggable).attr("data")+'">' +
                        '<div class="col-sm-12 Custom-heading">' +
                        '<div class="col-sm-12 CustomBody">' +
                        '<label>'+ui.draggable.text() +'</label>' +
                        '<button type="button" class="btn btn-xs pull-right remove"><span class="icon-em del"></span></button>' +
                        '</div></div></div>');
            }
            obj.append($el);
            init();
        }
    }).sortable({
                items: '.drop-item',
                sort: function() {
                    // gets added unintentionally by droppable interacting with sortable
                    // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options

                    $( '.dropzone' ).removeClass( "active" );
                }
            });
    $(".remove").on("click",function () {
        //var obj = $(this).parent().hasClass("drop-item") ?  $(this).parent(): $(this).parent().parent();
        var obj = $(this).parent().parent().parent();
        obj.detach();
    });
}
/*拖动操作初始化及规范-End*/
</script>